@import "common/common";

@leftBoxBgColor: #353441;
#app {
  width: 100%;
  height: 100%;

  .index {
    display: flex;
    width: 100%;
    height: 100%;

    .leftBox {
      flex: 0 0 260px;
      display: flex;
      flex-direction: column;
      background: #19233C;

      .header {
        flex: 0 0 70px;
        display: flex;
        align-items: center;
        justify-content: center;
        .logo {
          width: 230px;
          height: 57px;
          background: url('../assets/login/logo.png');
          background-size: 100% 100%;
        }

      }

      .content {
        flex: 1;
        overflow: auto;
        &::-webkit-scrollbar {
          display: none; /* Chrome Safari */
        }
      }
    }

    .collapseLeftBox {
      flex: 0 0 56px;

      .header {
        .logo {
          width: 42px;
          height: 30px;
          background: url('../assets/login/logo2.png');
          background-size: 100% 100%;
        }
      }
    }

    .rightBox {
      flex: 1;
      position: relative;
      background: #f0f0f0;

      .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 70px;
        padding: 0 16px;
        background: @allWhite;

        .headerImg{
          width: 32px;
          height: 32px;
          margin-left: 24px;
        }

        .open_close {
          width: 20px;
          height: 20px;
          overflow: hidden;
          margin-right: 4px;
          cursor: pointer;
          .collapsePic {
            width: 20px;
            height: 20px;

          }

          .reseverPic {
            transform: rotate(90deg);
          }
          .closeBtn{
            font-size: 20px;
          }
        }

        .breadcrumb {
          flex: 1;

          /deep/ .el-breadcrumb {
            cursor: pointer;

            .el-breadcrumb__item .el-breadcrumb__inner {
              color: @allPrimaryColor;
            }

            .active .el-breadcrumb__inner {
              color: @fontColor;
            }
          }
        }

        .logout {
          display: flex;
          align-items: center;

          .webName {
            margin: 0 @commonPaddingOutside;
            font-family: Microsoft YaHei UI, Microsoft YaHei UI;
            font-weight: 400;
            font-size: 14px;
            color: #000000;
            line-height: 22px;
          }

          .notification {
            position: relative;
            cursor: pointer;

            &.unread {
              color: @allDangerColor;
            }

            .notificationIcon {
              font-size: 22px;
            }

            .notificationNum {
              transform: scale(0.5);
              position: absolute;
              top: -10px;
              right: -12px;
              font-size: 16px;
              width: 30px;
              height: 30px;
              line-height: 30px;
              border-radius: 15px;
              text-align: center;
              color: @allWhite;
              background: @allDangerColor;
            }
          }
        }
      }

      .content {
        width: 100%;
        padding: 12px;
        position: absolute;
        top: 70px;
        bottom: 0;
        overflow: auto;
      }
    }
  }
  .logoutBtn{
    font-size: 18px;
    color: #165DFF;
    cursor: pointer;
  }
}

@media (min-width: 1280px) and (max-width: 1680px) {
  #app .index .leftBox{
    flex: 0 0 200px;
  }
  #app .index .collapseLeftBox{
    flex: 0 0 56px;
  }
}
